﻿<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">DropDownBox with embedded TreeView</div>
        <div class="dx-field-value">
            @(Html.DevExtreme().DropDownBox()
                .Value(new[] { "1_1" })
                .ValueExpr("ID")
                .DisplayExpr("Text")
                .DropDownOptions(o => o.Height(350))
                .DataSource(d => d.Mvc()
                    .Controller("TreeViewPlainData")
                    .LoadAction("Get")
                    .LoadMode(DataSourceLoadMode.Raw)
                    .Key("ID")
                )
                .Placeholder("Select a value...")
                .ShowClearButton(true)
                .OnValueChanged("treeBox_valueChanged")
                .ContentTemplate(new TemplateName("EmbeddedTreeViewMultiple"))
            )
            <div id="treeBox"></div>
        </div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">DropDownBox with embedded DataGrid</div>
        <div class="dx-field-value">
            @(Html.DevExtreme().DropDownBox()
                .Value(new[] { 3 })
                .ValueExpr("ID")
                .DisplayExpr("CompanyName")
                .DataSource(d => d.Mvc()
                    .Controller("DataGridCustomers")
                    .LoadAction("Get")
                    .LoadMode(DataSourceLoadMode.Raw)
                    .Key("ID")
                )
                .Placeholder("Select a value...")
                .ShowClearButton(true)
                .OnValueChanged("gridBox_valueChanged")
                .ContentTemplate(new TemplateName("EmbeddedDataGridMultiple"))
            )
        </div>
    </div>
</div>

@using(Html.DevExtreme().NamedTemplate("EmbeddedTreeViewMultiple")) {
    @(Html.DevExtreme().TreeView()
        .DataSource(new JS(@"component.getDataSource()"))
        .KeyExpr("ID")
        .DisplayExpr("Text")
        .ItemsExpr("Items")
        .ExpandedExpr("Expanded")
        .ParentIdExpr("CategoryId")
        .DataStructure(TreeViewDataStructure.Plain)
        .SelectionMode(NavSelectionMode.Multiple)
        .ShowCheckBoxesMode(TreeViewCheckBoxMode.Normal)
        .SelectNodesRecursive(false)
        .SelectByClick(true)
        .Height(235)
        .OnItemSelectionChanged(@<text>
            function(args) {
                component.option("value", args.component.getSelectedNodeKeys());
            }
        </text>)
        .OnContentReady(@<text>
            function(args) {
                syncTreeViewSelection(args.component, component.option("value"));
            }
        </text>)
    )
}

@using(Html.DevExtreme().NamedTemplate("EmbeddedDataGridMultiple")) {
    @(Html.DevExtreme().DataGrid()
        .ID("embedded-datagrid")
        .DataSource(new JS(@"component.getDataSource()"))
        .Columns(columns => {
            columns.Add().DataField("CompanyName");
            columns.Add().DataField("City");
            columns.Add().DataField("Phone");
        })
        .HoverStateEnabled(true)
        .Paging(p => p.PageSize(10))
        .FilterRow(f => f.Visible(true))
        .Scrolling(s => s.Mode(GridScrollingMode.Infinite))
        .Height(345)
        .Selection(s => s.Mode(SelectionMode.Multiple))
        .SelectedRowKeys(new JS(@"component.option(""value"")"))
        .OnSelectionChanged(@<text>
            function(selectedItems) {
                var keys = selectedItems.selectedRowKeys;
                component.option("value", keys);
            }
        </text>)
    )
}

<script>
    function syncTreeViewSelection(treeView, value) {
        if (!value) {
            treeView.unselectAll();
            return;
        }

        value.forEach(function (key) {
            treeView.selectItem(key);
        });
    }

    function treeBox_valueChanged(e) {
        var $treeView = e.component.content().find(".dx-treeview");
        if($treeView.length) {
            syncTreeViewSelection($treeView.dxTreeView("instance"), e.value);
        }
    }

    function gridBox_valueChanged(e) {
        var $dataGrid = $("#embedded-datagrid");

        if ($dataGrid.length) {
            var dataGrid = $dataGrid.dxDataGrid("instance");
            dataGrid.selectRows(e.value, false);
        }
    }
</script>
